<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jet-CMS | User</title>
    <link type="text/css" rel="stylesheet" th:href="@{/pure-min.css}" />
    <link type="text/css" rel="stylesheet" th:href="@{/main.css}" />
    <script type="text/javascript" th:src="@{/main.js}"></script>
    <script type="text/javascript" th:src="@{/vue-min.js}"></script>
    <style>
        .table {
            font-size: 14px;
        }
        .u-img {
            max-width: 100px;
        }
        .u-time {
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div id="app">
        <span th:include="home/_nav"></span>
        <div class="container">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <button type="button" v-on:click="status=-1" v-bind:class="{'btn-blue': status===-1}" class="pure-button btn-sm">全部用户</button>
                    <button type="button" v-on:click="status=0" v-bind:class="{'btn-blue': status===0}" class="pure-button btn-sm">冻结</button>
                    <button type="button" v-on:click="status=1" v-bind:class="{'btn-blue': status===1}" class="pure-button btn-sm">普通用户</button>
                    <button type="button" v-on:click="status=2" v-bind:class="{'btn-blue': status===2}" class="pure-button btn-sm">会员</button>
                    <button type="button" v-on:click="status=9" v-bind:class="{'btn-blue': status===9}" class="pure-button btn-sm">管理员</button>
                </div>
                <div class="pure-u-1-4">
                    人数：<b>{{allCount}}</b>
                </div>
                <div class="pure-u-1-4 text-right">
                    <form class="pure-form" v-on:submit.prevent="search">
                        <input type="text" class="pure-input" v-model="keyword">
                        <button type="submit" class="pure-button btn-sm">搜索</button>
                    </form>
                </div>
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>形象</th>
                        <th style="width:210px;">账号</th>
                        <th style="width:180px;">基本信息</th>
                        <th>扩展信息</th>
                        <th>权限</th>
                        <th style="width:100px;">状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in userList">
                        <td>
                            <img v-if="item.avatar!=''" class="u-img" v-bind:src="'/resource/output/'+item.avatar" />
                            <img v-else class="u-img" src="/images/default.jpg" />
                        </td>
                        <td>
                            <big>{{item.account}}</big><br>
                            <small>{{item.id}}</small>
                        </td>
                        <td>
                            <big>{{item.name}}</big> 
                            <span v-if="item.gender>0">
                                [ <b>{{['-','男士','女士'][item.gender]}}</b> ]
                            </span>
                        </td>
                        <td>
                            <div class="u-time">注册：{{dateFormat('y-m-d h:i', item.createTime*1000)}}({{item.count}})</div>
                            <div class="u-time">登录：{{dateFormat('y-m-d h:i', item.activeTime*1000)}}</div>
                            <div class="u-time">IP：{{item.ip}}</div>
                        </td>
                        <td>
                            <label><input v-on:change="setRole(item.id, 1, $event)" v-bind:checked="item.role & 1" type="checkbox" value="1"> 内容</label>
                            <label><input v-on:change="setRole(item.id, 2, $event)" v-bind:checked="item.role & 2" type="checkbox" value="2"> 资源</label>
                            <label><input v-on:change="setRole(item.id, 4, $event)" v-bind:checked="item.role & 4" type="checkbox" value="4"> 用户</label>
                            <label><input v-on:change="setRole(item.id, 8, $event)" v-bind:checked="item.role & 8" type="checkbox" value="8"> 特需</label>
                        </td>
                        <td>
                            <select v-on:change="setStatus(item.id, $event)">
                                <option value="0" v-bind:selected="item.status==0">冻结</option>
                                <option value="1" v-bind:selected="item.status==1">普通用户</option>
                                <option value="2" v-bind:selected="item.status==2">会员</option>
                                <option value="9" v-bind:selected="item.status==9">管理员</option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
            <pagination ref="pageView"></pagination>
        </div>
    </div>
</body>
<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#app',
        data: {
            offset: 0,
            status: -1,
            keyword: '',
            userList: [],
            allCount: 0
        },
        components: {
            pagination: Pagination
        },
        watch: {
            status: function(newVal, oldVal) {
                vue.offset = 0;
                vue.loadUserList();
            }
        },
        methods: {
            init: function(){
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function(page){
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadUserList();
                });
                this.loadUserList();
            },
            search: function() {
                vue.offset = 0;
                vue.loadUserList();
            },
            setStatus: function(id, event) {
                httpRequest(
                    '/user/setStatus.do',
                    {id: id, status: event.originalTarget.value},
                    function(res) {
                        if (res.code != 1) {
                            alert(res.error);
                        }
                    },
                    'json'
                );
            },
            setRole(id, role, event) {
                if (! event.originalTarget.checked) {
                    role = -role;
                }
                httpRequest(
                    '/user/setRole.do',
                    {id: id, role: role},
                    function(res) {
                        if (res.code != 1) {
                            alert(res.error);
                        }
                    },
                    'json'
                );
            },
            loadUserList: function(){
                httpRequest(
                    '/user/getCount.do',
                    {status: vue.status, keyword: vue.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.allCount = res.result;
                            vue.$refs['pageView'].setData(res.result);
                        }
                    },
                    'json'
                );
                httpRequest(
                    '/user/getList.do',
                    {offset: vue.offset, limit: LIMIT, status: vue.status, keyword: vue.keyword},
                    function(res) {
                        if (res.code == 1) {
                            vue.userList = res.result;
                        }
                    },
                    'json'
                );
            }
        }
    });
    vue.init();
</script>
</html>